<template>
  <div>
    <!-- {{ msg }} -->
    <!-- <p v-for="(item,index) in arr" :key="index">
      {{ item }}
    </p>
    <button @click="changeArr">
      按钮
    </button> -->
    <!-- {{ count }} -->
    <!-- <ul>
      <template v-for="(item,index) in cart" :key="index">
        <li v-if="item.show == true">
          {{ item.title }} --- {{ item.price }}
        </li>
      </template>
      
    </ul>
    {{ count }} -->

    <!-- <input type="text" v-model="msg">
      input textarea select
      {{ msg }} -->
<!-- <p>
  msg: 
  <input type="text" v-model="msg">
  {{ msg }}
</p> -->
<!-- <p>
  msges: 
  <input type="text" v-model="msges">
  {{ msges }}
</p> -->
<!-- <p>
  {{ obj.title }}
  <button @click="changeObj">
    按钮
  </button> -->
  <!-- <input type="text" v-model="obj.title"> -->
<!-- </p> -->

<!-- <input type="text" v-model="names"> -->
    <!--v3组件传值方式不变  -->
  <com 
  
  :names="'常佳乐'" 

  :type="sex" 
  
  @typeAnge="types"/>
  </div>
</template>

<script setup>
// 在Setup 里面完全不需要 注册 ，直接可以在模板里面使用
import com from './components/com.vue';
import { ref ,onMounted } from 'vue';
var sex = ref('男');
function types(e){
  sex.value = e;
}

/* 
  vue3 的 setup 的this
  没有
*/
// console.log(window);
// onMounted(() => {
//   console.log(this);
// })
// console.log(this);

// export default {

// }

// import {defineProps} from 'vue'
// const props = defineProps['abc']
// 直接在语法糖中使用 变量直接赋值  不会进行数据双向绑定
// 需要vue中的ref双向绑定提示 
// const msg = '阿猫';

// import {ref,reactive} from 'vue';
// const msg = ref('阿猫');
// msg = {
//   value : '阿猫'
// }

// const arr = ref(['小猫','小狗','小熊饼干']);
// 不建议ref 直接绑定数组;
// 推荐使用 reactive

// const arr = reactive(['小猫','小狗','小熊饼干'])
// function changeArr (){
//   // console.log();
//   arr[0] = '小猫猫'
// }

// function changeMsg(){
//   // console.log(msg);
//   // msg = '阿狗'
//   // msg.value = '阿狗'
// }

// export default {
//   data() {
//     return {
//       msg: '阿猫'
//     }
//   },
//   methods: {
    
//   },
// }
/* 
  在 script 标签中使用setup的目的；
  是为了，告诉scrtipt模板，我要开始使用
  原生JavaScript语法 抒写vue代码;
  也叫做 vue的语法糖;
*/
  /* 
    在 v3的项目当中使用v2的语法，一路绿灯;
    但是v3毕竟是v3 及你想还是要写一些高端语法;

    大部分的不卷开发者，依然在v3中使用 v2的语法；
    目的是为了，使用vite;
  */

  // export default{

  //  }

  /* 
    ref :
      ref 主要是一个 定义常量的 双向数据绑定;
        数值，字符串，布尔值，空(null)，未定义
        改变ref的值，需要 变量.value 去直接赋值
    reactive: 
      reactive 主要是一个 定义对象(Array,Object,Map.Set等)类型的
      数据
      改变reactive的值可以直接 变量赋值更改
  */
//  引入 计算属性 computed
//  import { computed,reactive } from 'vue';
  
//     const cart = reactive([
//       {
//         title: '小熊饼干',
//         price:'999',
//         show: false
//       },
//       {
//         title: '卫龙2',
//         price: '88',
//         show: true
//       },
//       {
//         title: '统一冰红茶',
//         price: '10',
//         show: true
//       }
//     ])

//   const count = computed(() => {
//     let price = 0;
//     cart.forEach(item => {
//       price += Number(item.price);
//     })
//     return price
//   })


// 双向数据绑定input
// import {ref} from 'vue';

// let msg = ref('');

// 
// import {ref, watch} from 'vue';

// const msg = ref('');
// const msges = ref('');
// 单个数据监听
// watch(msg,(newVal,prevVal) => {
//   // newVal 改变后值
//   // prevVal 改变前的值
//   console.log(newVal,prevVal);
// })

// watch([msg,msges],([msgNval,msgesNval],[msgpval,msgespval]) => {
//   // newVal 改变后值
//   // prevVal 改变前的值
//   /* 
//     msgNval,msgesNval 分别对应 msg和msges的新值
//     msgpval,msgespval 分别对应msg和msges的旧值
//   */
//   // console.log(msgNval,msgesNval,msgpval,msgespval);
// })
// watch('监听的数据名',事件,参数)

// import {reactive,watch} from 'vue';

// let obj = reactive([{
//     title: '小猫'
//   }])
// watch(obj,(n,o) => {
//   console.log(n,o);
// })
// // watch监听 和 v2不一样的是，如果监听的是一个对象，会自动开启深度监听
// const changeObj = () => {
//   obj[0].title = '小狗'
// }



/* 
  setup
  v3的双向绑定:  
    和v2不同  需要使用ref定义双向绑定的常量
      使用reactive定义双向绑定的对象(Object,Array,Map,Set)等属性;
  计算属性:
    computed:
      变量名 = computed(() => {
        return '计算结果'
      })
  事件处理:
      不需要在methods里面定义;
      可以使用原生js的方式 直接调用事件(函数)
  监听:
      watch('监听的属性名',监听事件,监听的属性);

*/
// import { watchEffect,ref } from 'vue';

// const names = ref('abc')
  
//       watchEffect(() => {
//         // 因为我在 watchEffect里面使用了 names.value
//         // 所以names.value 被监听了;
//         console.log(names.value);
//       })
</script>
